<template>
  <div class="app-container">
    <!--过滤-->
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <!--树形列表-->
    <div class="custom-tree-container">
      <div class="block">
        <p>科目列表
          <el-button
            type="text"
            @click="() => createOne()">创建一级科目
          </el-button>
        </p>
        <el-tree
          ref="tree"
          :data="subjectData"
          show-checkbox
          node-key="id"
          :expand-on-click-node="false"
          :filter-node-method="filterNode">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button
                type="text"
                size="mini"
                @click="() => createTwo(data)">
                {{ node.level === 1 ? "创建二级科目" : null }}
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => remove(node, data)">
                删除
              </el-button>
            </span>
          </span></el-tree>
      </div>
    </div>
    <!--创建科目弹窗-->
    <el-dialog
      :title="createSubjectTitle"
      :visible.sync="dialogVisible"
      width="30%"
      @before-close="dialogVisible = false">
      <!--表单提交-->
      <el-form :model="subject" :rules="rules" ref="subject" label-width="100px" class="demo-ruleForm">
        <el-form-item label="科目名称" prop="title">
          <el-input v-model="subject.title"></el-input>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitSubject()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {findAllSubject, deleteSubject, createSubject} from '@/api/subject/subject'

export default {
  name: "list",
  data() {
    return {
      // 树形列表
      subjectData: [],
      // 搜索的关键字
      filterText: '',
      // 弹窗标题
      createSubjectTitle: '',
      // 创建科目的弹窗状态
      dialogVisible: false,
      // 科目
      subject: {
        title: '',
        parentId: 0,
        sort: 0
      },
      // 创建科目规则
      rules: {
        title: [
          {required: true, message: '请输入科目标题', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 创建二级科目弹框
    createTwo(data) {
      this.createSubjectTitle = '创建二级科目'
      this.dialogVisible = true
      // 封装
      this.subject.parentId = data.id
    },
    // 创建一级科目弹框
    createOne(data) {
      this.createSubjectTitle = '创建一级科目'
      this.dialogVisible = true
      // 封装
      this.subject.parentId = 0
    },
    // 删除科目
    async remove(node, data) {
      // 判断子节点为空时才能进行删除
      if (!data.children || !data.children.length) {
        let result = await deleteSubject(data.id)
        // 判断结果
        if (result.code === 20000) {
          this.$message.success("删除成功！")
          // dom操作删除节点
          this.$refs.tree.remove(node)
        } else {
          this.$message.error("删除失败，" + result.message)
        }
      } else {
        this.$message.warning("该科目存在子科目，不可以删除！")
      }
    },
    // 创建科目，
    async submitSubject() {
      // 验证规则
      this.$refs.subject.validate(async (valid) => {
        if (valid) {
          this.dialogVisible = false
          // 调用接口
          let r = await createSubject(this.subject)
          if (r.code === 20000) {
            this.$message.success("创建成功!!")
            // 刷新
            await this.findAll()
          } else {
            this.$message.error("创建失败，" + r.message)
          }
        }
      })

    },
    // 查询全部的科目
    async findAll() {
      let r = await findAllSubject()
      this.subjectData = r.data
    }
  },
  created() {
    this.findAll()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  }
}
</script>

